@import 'src/style/var.scss';
@import 'src/style/function.scss';

.commom_header{
	position: fixed;
    top: 0;
    width: 100%;
    height: 2.2rem;
    background-color: #F7F7F7;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #eaeaea;
    z-index: 2;
    .iconfont{
		height: 100%;
	    width: 2.2rem;
	    text-align: center;
	    font-size: 0.85rem;
	    font-family: 'iconfont';
    }
    .btnClass{
        height: 100%;
        width: 2.2rem;
        text-align: center;
    }
    .flex-box{
    	display: flex;
	    height: 2.2rem;
	    line-height: 2.2rem;
	    .header_text{
    	text-align: center;
    	font-size: .6rem;
    	}
    	.fold_icon:before{
    		content: '\e628';
    	}
    }
        .flex-item-1{
            -webkit-box-flex: 1;
            flex:1;
        }
    .fold_nav{
    	background-color: #f7f7f7;
	    white-space: nowrap;
	    overflow: hidden;
	    position: relative;
	    z-index: 1;
	    height: 2rem;
	    .nav_item{
	    	height: 2rem;
		    line-height: 2rem;
		    text-align: center;
		    font-size: 0.5rem;
		    color: #333;
		    display: inline-block;
		    width: 25%;
		    vertical-align: middle;
		    float: left;
		    &:before{
		    	font-size: 0.85rem;
    			vertical-align: bottom;
		    }
	    }
	    .wap_index:before {
		    content: '\e622';
		}
		.wap_list:before {
		    content: '\e625';
		}
		.wap_cart:before {
	    	content: '\e616';
		    display: inline-block;
		    width: 0.85rem;
		}
		.wap_user:before {
		    content: '\e623';
		}
    }
    
}

.tab_nav {
    background-color: $bg-color;
    width: 100%;
    height: pxToRem(140.8px);
    position: absolute;
    left: 0;
    top: 0;
    li {
        float: left;
        width: 30%;
        // text-align: center;
        font-size: pxToRem(48px);
        line-height: pxToRem(140.8px);
        box-sizing: border-box;
        &:first-child {
            margin-left: 35%;
        }
        a {
            color: $primary-text-color;
            text-decoration: none;
        }
        &.selected {
            a {
                color: $tabSelected-color;
                display: inline-block;
                height: pxToRem(140.8px);
                width: 70%;
                border-bottom: pxToRem(9.6px) solid $h-bg-color;
            }
        }
    }
    .searchBtn {
        margin: .5rem .75rem .4rem .6rem;
        float: right;
        &:after {
            font-size: 1.1rem;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: .2px;
            -moz-osx-font-smoothing: grayscale;
            color: #c7c7c7;
        }
    }
}